<template>
  <div class="table-container">
    <div class="table-title">
      <slot name="title">
        {{ propTitle }}
      </slot>
    </div>
    <v-data-table
      ref="table"
      disable-sort
      fixed-header
      v-on="$listeners"
      v-bind="$attrs"
      class="table"
      :class="{
        'rounded-header': propRoundedHeader,
        rounded: propRounded,
        dense: propDense,
        obstruct: propObstruct,
      }"
    >
      <template v-for="(index, name) in $scopedSlots" #[name]="slotsData">
        <slot :name="name" v-bind="slotsData" />
      </template>
      <template v-if="propShowHeaderAction" v-slot:[`header.action`]="slotData">
        <slot name="header.action" v-bind="slotData">
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-icon
                color="#fff"
                class="icon pointer"
                v-on="on"
                v-bind="attrs"
                @click="$emit('add')"
              >
                mdi-plus
              </v-icon>
            </template>
            <span>{{ propAddTooltip }}</span>
          </v-tooltip>
        </slot>
      </template>
      <template #[`item.action`]="slotData">
        <div class="action">
          <slot name="item.action" v-bind="slotData">
            <v-tooltip bottom>
              <template v-slot:activator="{ on, attrs }">
                <v-icon
                  small
                  class="mr-2 icon"
                  color="#79839B"
                  v-on="on"
                  v-bind="attrs"
                  @click="$emit('edit', slotData.item, slotData.index)"
                >
                  mdi-square-edit-outline
                </v-icon>
              </template>
              <span>{{ propEditTooltip }}</span>
            </v-tooltip>
            <v-tooltip bottom>
              <template v-slot:activator="{ on, attrs }">
                <v-icon
                  small
                  class="icon"
                  color="#79839B"
                  v-on="on"
                  v-bind="attrs"
                  @click="$emit('delete', slotData.item, slotData.index)"
                >
                  mdi-delete
                </v-icon>
              </template>
              <span>{{ propDeleteTooltip }}</span>
            </v-tooltip>
          </slot>
        </div>
      </template>
    </v-data-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  props: {
    showHeaderAction: {
      type: Boolean,
      default: true,
    },
    roundedHeader: {
      type: Boolean,
      default: false,
    },
    rounded: {
      type: Boolean,
      default: true,
    },
    title: String,
    dense: {
      type: Boolean,
      default: false,
    },
    obstruct: {
      type: Boolean,
      default: true,
    },
    addTooltip: {
      type: String,
      default: "Add",
    },
    editTooltip: {
      type: String,
      default: "Edit",
    },
    deleteTooltip: {
      type: String,
      default: "Delete",
    },
  },
})
export default class Table extends Vue {
  // @Prop(Boolean) readonly showHeaderAction!: boolean;
  get propShowHeaderAction() {
    return this.$props.showHeaderAction;
  }

  get propTitle() {
    return this.$props.title;
  }

  get propRounded() {
    return this.$props.rounded;
  }

  get propRoundedHeader() {
    return this.$props.roundedHeader;
  }

  get propDense() {
    return this.$props.dense;
  }

  get propObstruct() {
    return this.$props.obstruct;
  }

  get propAddTooltip() {
    return this.$props.addTooltip;
  }

  get propEditTooltip() {
    return this.$props.editTooltip;
  }

  get propDeleteTooltip() {
    return this.$props.deleteTooltip;
  }
}
</script>

<style lang="scss" scoped>
@import "./Table.scss";
</style>
